公開日：2020.03.05
更新日：2020.03.13
まだNVDAでの確認のみです。他のスクリーンリーダーで試したらまた更新する。
↑VoiceOverでもためしたよ！
ちょっとこれが最適解なのかは微妙なのですが。
<label>で挟まなければいいのかね…？（未確認） 関係なかった
code:.html
<label class="input-box">
<span class="input-box__txt">画像を選択または撮影</span>
<input type="file" name="" accept="image/*">
</label>
こんな感じのinput要素を作ります。
すると、スクリーンリーダーは
「画像を選択または撮影ボタン画像を選択または撮影」
と、間に「ボタン」を挟んで2回<span>内のテキストを読み上げます。
全く読まれないよりかは確かにマシではありますが、すごい冗長的で、ちょっと不親切に感じる。わたしは。
code:WAI-ARIAをつけたサンプル.html
<label class="input-box">
<span class="input-box__txt" aria-hidden="true">画像を選択または撮影</span>
<input type="file" name="" accept="image/*" aria-label="画像を選択または撮影">
</label>
ちなみに、inputをCSSのdisplay="none"で消しても読み上げに関しては解決しますが、
フォーカスしても、デフォルトのアウトラインが表示されず、迷子になってしまうことがあるのでこれはボツです。
CSSでうにうにアウトラインを実装しても、ブラウザの拡張機能でアウトラインを弄ってる人にとっても使いにくいものになります。
なのでできるだけ、ブラウザの標準機能でできることはやっていきたい所存です。
でもどうしようもないときはある！しゃーない！
以上。